<template>
  <div class="demo-container">
    <svg width="800" height="600" style="border: 1px solid #eee;">
      <!-- 实线矩形区域 -->
      <AreaMarker
        :x="50"
        :y="50"
        :width="200"
        :height="150"
        title="实线区域"
        :isDashed="false"
        borderColor="#1890ff"
        titlePosition="top"
      />

      <!-- 虚线矩形区域 -->
      <AreaMarker
        :x="300"
        :y="50"
        :width="200"
        :height="150"
        title="虚线区域"
        :isDashed="true"
        :dashLength="8"
        :dashGap="4"
        borderColor="#52c41a"
        titlePosition="right"
      />

      <!-- 圆角矩形区域 -->
      <AreaMarker
        :x="50"
        :y="250"
        :width="200"
        :height="150"
        title="圆角区域"
        :borderRadius="20"
        borderColor="#722ed1"
        titlePosition="bottom"
      />

      <!-- 自定义样式区域 -->
      <AreaMarker
        :x="300"
        :y="250"
        :width="200"
        :height="150"
        title="自定义样式"
        :borderWidth="3"
        :titleSize="16"
        titleColor="#f5222d"
        borderColor="#f5222d"
        titlePosition="center"
      />
    </svg>
  </div>
</template>

<script setup lang="ts">
import AreaMarker from './AreaMarker.vue'

defineOptions({
  name: 'AreaMarkerDemo'
})
</script>

<style scoped>
.demo-container {
  padding: 20px;
  background: #fff;
}
</style> 